<template>
  <el-card shadow="hover" class="mt-2">
    <EChartOfMember></EChartOfMember>
  </el-card>

  <el-card shadow="hover" class="mt-2">
    <EChartOfOrder></EChartOfOrder>
  </el-card>

  <el-card shadow="hover" class="mt-2">
    <EChartOfArea></EChartOfArea>
  </el-card>

  <el-card shadow="hover" class="mt-2">
    <EChartOfAge></EChartOfAge>
  </el-card>

  <el-card shadow="hover" class="mt-2">
    <el-descriptions class="margin-top" title="系统信息" :column="3" :size="size" border>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            操作系统
          </div>
        </template>
        CentOS 8.0
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            网站IP
          </div>
        </template>
        localhost
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            程序版本
          </div>
        </template>
        <el-tag size="small">1.0.0</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            运行环境
          </div>
        </template>
        nginx 1.12.0
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            PHP版本
          </div>
        </template>
        7.4.39
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            MySQL版本
          </div>
        </template>
        5.7.36
      </el-descriptions-item>
    </el-descriptions>
  </el-card>
</template>

<script setup>
import EChartOfMember from './components/EChartOfMember.vue';
import EChartOfOrder from './components/EChartOfOrder.vue';
import EChartOfArea from './components/EChartOfArea.vue';
import EChartOfAge from './components/EChartOfAge.vue';
import { onMounted } from 'vue';

onMounted(() => {

})
</script>
